import React from 'react'
import { Card, Button, Progress, Typography } from 'antd'
import { AudioOutlined, StopOutlined } from '@ant-design/icons'

const { Text } = Typography

interface VoiceRecognitionStats {
  totalSessions: number
  successCount: number
  errorCount: number
  averageResponseTime: number
  accuracy: number
}

interface VoiceRecognitionPanelProps {
  isRecognizing: boolean
  recognizedText: string
  audioData?: Float32Array
  stats: VoiceRecognitionStats
  onStartRecognition: () => void
  onStopRecognition: () => void
  style?: React.CSSProperties
}

const VoiceRecognitionPanel: React.FC<VoiceRecognitionPanelProps> = ({
  isRecognizing,
  recognizedText,
  audioData,
  stats,
  onStartRecognition,
  onStopRecognition,
  style
}) => {
  // 计算音频波形数据
  const getAudioLevel = () => {
    if (!audioData || audioData.length === 0) return 0
    
    const sum = audioData.reduce((acc, val) => acc + Math.abs(val), 0)
    const average = sum / audioData.length
    return Math.min(average * 100, 100) // 转换为百分比并限制在100以内
  }

  const audioLevel = getAudioLevel()

  return (
    <Card
      title="语音识别面板"
      size="small"
      style={{
        width: 350,
        ...style
      }}
    >
      <div style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <Button
            type={isRecognizing ? "default" : "primary"}
            icon={<AudioOutlined />}
            onClick={onStartRecognition}
            disabled={isRecognizing}
            size="small"
          >
            开始识别
          </Button>
          <Button
            type="primary"
            danger
            icon={<StopOutlined />}
            onClick={onStopRecognition}
            disabled={!isRecognizing}
            size="small"
          >
            停止识别
          </Button>
        </div>

        {/* 音频波形显示 */}
        <div style={{ marginBottom: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>音频输入:</Text>
          <Progress
            percent={audioLevel}
            size="small"
            strokeColor={isRecognizing ? '#52c41a' : '#d9d9d9'}
            showInfo={false}
            style={{ marginTop: 4 }}
          />
        </div>

        {/* 识别状态 */}
        <div style={{ marginBottom: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>状态:</Text>
          <div style={{ marginTop: 4 }}>
            <Text style={{ 
              color: isRecognizing ? '#52c41a' : '#666',
              fontSize: 12
            }}>
              {isRecognizing ? '🎤 正在识别...' : '⏸️ 待机中'}
            </Text>
          </div>
        </div>

        {/* 识别结果 */}
        <div style={{ marginBottom: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>识别结果:</Text>
          <div style={{
            marginTop: 4,
            padding: 8,
            backgroundColor: '#f5f5f5',
            borderRadius: 4,
            minHeight: 40,
            fontSize: 12
          }}>
            {recognizedText || '暂无识别结果'}
          </div>
        </div>

        {/* 统计信息 */}
        <div>
          <Text type="secondary" style={{ fontSize: 12 }}>统计信息:</Text>
          <div style={{ marginTop: 4, fontSize: 11 }}>
            <div>总会话: {stats.totalSessions}</div>
            <div>成功: {stats.successCount} | 失败: {stats.errorCount}</div>
            <div>平均响应: {stats.averageResponseTime}ms</div>
            <div>准确率: {stats.accuracy.toFixed(1)}%</div>
          </div>
        </div>
      </div>
    </Card>
  )
}

export default VoiceRecognitionPanel